<template>
  <div class="hello">
    <vxe-table
      align="center"
      :data="tableData"
      class="table1"
      :loading="tableLoading"
      :cell-style="cellStyle"
      border
    >
      <vxe-column 
        v-for="item in tableColumns" 
        :key="item.prop" 
        :field="item.prop" 
        :title="item.label" 
        :min-width="item.width"
        :fixed="item.fixed"
      >
        <template #default="{ row, rowIndex }">
          <div v-if="item.prop === 'nickName' && rowIndex != 0">
            <div style="margin-top: 5px">{{ row.nickName }}1</div>
          </div>
          <!-- <div v-if="item.prop === 'submitType.message' && row.submitType.message === true">
            <div style="background-color: gray;">/</div>
          </div> -->
          <span  v-else>{{ row[item.prop] }}</span>
        </template>
      </vxe-column>
    </vxe-table>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableColumns: {
      type: Array,
      default: () => []
    },
  },
  data:function() {
    return {
      tableLoading: false,
    };
  },
  methods: {
    cellStyle({row,column}){
      if(row.submitType.name === "BATCH"){
        if(column.title === '贵宾卡号'){
          return {
            background:'linear-gradient(151deg, transparent 48.5%, grey 49.5%, grey 49.5%, transparent 51.5%)',
            backgroundColor:'rgb(245,247,250)'
          }
        }
        if(column.title === '单位名称'){
          return {
            background:'linear-gradient(151deg, transparent 48.5%, grey 49.5%, grey 49.5%, transparent 51.5%)',
            backgroundColor:'rgb(245,247,250)'
          }
        }
        if(column.title === '小户名'){
          return {
            background:'linear-gradient(151deg, transparent 48.5%, grey 49.5%, grey 49.5%, transparent 51.5%)',
            backgroundColor:'rgb(245,247,250)'
          }
        }
        // if(column.title === '小户名职务'){
        //   return 'background:linear-gradient(151deg, transparent 48.5%, grey 49.5%, grey 49.5%, transparent 51.5%);background-color:rgb(245,247,250)'
        // }
        if(column.title === '受理人号码'){
          return {
            background:'linear-gradient(151deg, transparent 48.5%, grey 49.5%, grey 49.5%, transparent 51.5%)',
            backgroundColor:'rgb(245,247,250)'
          }
        }
        if(column.title === '原每月优惠金额'){
          return {
            background:'linear-gradient(151deg, transparent 48.5%, grey 49.5%, grey 49.5%, transparent 51.5%)',
            backgroundColor:'rgb(245,247,250)'
          }
        }
        if(column.title === this.title){
          return {
            background:'linear-gradient(151deg, transparent 48.5%, grey 49.5%, grey 49.5%, transparent 51.5%)',
            backgroundColor:'rgb(245,247,250)'
          }
        }
        if(column.title === '合同开始年月'){
          return {
            background:'linear-gradient(151deg, transparent 48.5%, grey 49.5%, grey 49.5%, transparent 51.5%)',
            backgroundColor:'rgb(245,247,250)'
          }
        }
        if(column.title === '合同结束年月'){
          return {
            background:'linear-gradient(151deg, transparent 48.5%, grey 49.5%, grey 49.5%, transparent 51.5%)',
            backgroundColor:'rgb(245,247,250)'
          }
        }
        if(column.title === '优惠开始时间'){
          return {
            background:'linear-gradient(151deg, transparent 48.5%, grey 49.5%, grey 49.5%, transparent 51.5%)',
            backgroundColor:'rgb(245,247,250)'
          }
        }
        if(column.title === '优惠结束时间'){
          return {
            background:'linear-gradient(151deg, transparent 48.5%, grey 49.5%, grey 49.5%, transparent 51.5%)',
            backgroundColor:'rgb(245,247,250)'
          }
        }
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.table1 {
  background-color: #f5f7fa;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.vxe-table--header th {
  background-color: red;
}
</style>
